<template>
  <div>
    <TopNav title="栏目管理" @jumpPage="$router.push('/newhome')" />
    <div class="deleteClass">
      <p>点击删除以下频道</p>
      <div class="delColumnList">
        <div
          class="item"
          v-for="(column, index) in delColumnList"
          :key="column.id"
          @click="deleteColumn(index)"
        >
          {{ column.name }}
        </div>
      </div>
    </div>
    <div class="addClass">
      <p>点击添加以下频道</p>
      <div class="addColumnList">
        <div
          class="item"
          v-for="(column, index) in addColumnList"
          :key="column.id"
          @click="addColumn(index)"
        >
          {{ column.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "../components/TopNav";
export default {
  data() {
    return {
      delColumnList: [],
      addColumnList: [],
    };
  },
  components: {
    TopNav,
  },
  created() {
    // 判断本地存储是否有添加频道的列表数据进行数据的渲染
    if (localStorage.getItem("addColumnList")) {
      // 将本地的添加频道渲染到页面
      this.addColumnList = JSON.parse(localStorage.getItem("addColumnList"));
      if (localStorage.getItem("delColumnList")) {
        // 将本地存储的删除频道列表渲染到页面
        this.delColumnList = JSON.parse(localStorage.getItem("delColumnList"));
      }
    } else {
      //只有当添加列表为空时 才获取所有的栏目
      this.$axios({
        url: "/category",
      }).then((res) => {
        // console.log(res);
        // 将获取的所有栏目存储到data
        this.delColumnList = res.data.data;
      });
    }
  },
  methods: {
    // 删除频道
    deleteColumn(index) {
      if (this.delColumnList.length == 1) {
        // 如果只要一个频道不要再删除，并提示情况
        this.$toast("不能再删除了");
        return;
      } else {
        // 不止一个频道，可以点击删除频道
        // console.log(index);
        // 将点击删除的频道放到数组addColumnList里面
        this.addColumnList.push(this.delColumnList[index]);
        //再删除点击的频道
        this.delColumnList.splice(index, 1);
        //  console.log(this.delColumnList);
      }
    },
    // 添加频道
    addColumn(index) {
      // 将点击的频道加到删除的列表
      this.delColumnList.push(this.addColumnList[index]);
      // 删除添加列表的点击频道
      this.addColumnList.splice(index, 1);
    },
  },
  watch: {
    // 监听删除列表的数据
    delColumnList() {
      // console.log(this.delColumnList);
      // 将变化后的频道列表存储到本地存储
      localStorage.setItem("delColumnList", JSON.stringify(this.delColumnList));
    },
    // 监听添加列表的数据
    addColumnList() {
      // 将每次变化的添加列表的数据存储到本地存储
      localStorage.setItem("addColumnList", JSON.stringify(this.addColumnList));
    },
  },
};
</script>

<style lang="less" scoped>
p {
  font-size: 12/360 * 100vw;
  // margin-left: 10/360 * 100vw;
  // margin-bottom: 10/360 * 100vw;
  padding: 0 10/360 * 100vw;
  margin-left: 10/360 * 100vw;
  color: #888;
}

.delColumnList,
.addColumnList {
  padding: 10/360 * 100vw;
  display: flex;
  flex-wrap: wrap;
  .item {
    font-size: 14/360 * 100vw;
    color: #333;
    border: 1px solid #000;
    padding: 8/360 * 100vw 16/360 * 100vw;
    margin: 5/360 * 100vw 10/360 * 100vw;
  }
}
</style>
